<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NewTravel Log In</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
    <main>
        <section class="tips login">
            <h3><a href="./index.html">NewTravel</a></h3>
            <h1>登录</h1>
            <h3><a href="./index.html">NewTravel</a></h3>
        </section>
        <section class="tips signup">
            <h3><a href="./index.html">NewTravel</a></h3>
            <h1>登录</h1>
            <h3><a href="./index.html">NewTravel</a></h3>
        </section>
        <section class="form loginForm">
            <div class="imgBox">
                <div class="userImg"></div>
            </div>
            <p>
                <label for="accounName">账号：</label><br />
                <input type="text" id="accounName" placeholder="accounName">
            </p>
            <p>
                <label for="password">密码：</label><br />
                <input type="text" id="password" placeholder="password">
            </p>
            <p>
                <input type="submit" value="登录">
            </p>
            <p id="goSignup">
                木有账户，去注册
            </p>
        </section>
        <section class="form signupForm">
            <div class="imgBox">
                <!-- 选择头像 -->
                <div class="userImg"></div>
                <div class="userImg"></div>
                <div class="userImg"></div>
            </div>
            <p>
                <label for="email">注册邮箱：</label><br />
                <input type="text" id="email" placeholder="email">
            </p>
            <p>
                <label for="accounName">用户名：</label><br />
                <input type="text" id="accounName" placeholder="accounName">
            </p>
            <p>
                <label for="password">创建密码：</label><br />
                <input type="text" id="password" placeholder="password">
            </p>
            <p>
                <label for="confirmPassword">确认密码：</label><br />
                <input type="text" id="confirmPassword" placeholder="confirmPassword">
            </p>
            <p>
                <input type="submit" value="确认注册">
            </p>
            <p id="goLogin">
                已有账户，去登录
            </p>
        </section>
    </main>

    <script>
        // stop here
        const login = document.querySelector('.login');
        const loginForm = document.querySelector('.loginForm');
        const signup = document.querySelector('.signup');
        const signupForm = document.querySelector('.signupForm');

        function log(text){
            console.log(text);
        }

        // log(login);log(loginForm);log(signup);log(signupForm);

        const goSignup = document.getElementById('goSignup');
        const goLogin = document.getElementById('goLogin');
        
        goSignup.onclick=function(){
            // log(goSignup);
            // 将loginForm不显示，将signForm显示
            // log(typeof login.style.display);
            login.style.display = 'none';
            signup.style.display = 'flex';
            loginForm.style.display = 'none';
            signupForm.style.display = 'flex';
        }
        goLogin.onclick=function(){
            // log(goLogin);
            //将loginForm显示，将signForm不显示
            login.style.display = 'flex';
            signup.style.display = 'none';
            loginForm.style.display = 'flex';
            signupForm.style.display = 'none';
        }


    </script>
</body>
</html>